<template>
  <div class="tableList" style="width:1000px;height: 1000px;margin: 0 auto">
    <div class="shou">
      <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" v-show="showSearch"
               label-width="68px">
        <el-form-item label="区域名称" prop="location">
          <el-input
            v-model="queryParams.location"
            placeholder="请输入区域名称"
            clearable
            v-hasPermi="['table:like']"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        </el-form-item>
      </el-form>
    </div>
    <div class="heard" style="padding-top:40px ">
      桌台展示
    </div>
    <div class="dish-list" style="width: 1000px;display: flex; flex-wrap: wrap; padding: 30px 10px 10px 80px ;border-top:4px solid  rgba(0, 0, 0, 0.3);;margin-top:10px  ">
      <div class="dish-item"
           style="height: 200px;width: 180px;margin: 20px 20px; text-align: center;border-radius: 10px;"
           v-for="(table,index) in listTable " :key="table.id" >
        <div :class="'stu'+table.stausId">
          <div> 桌id: {{table.id}}</div>
          <div class="lou" @click="toCart(table)">
            位置: {{ table.location }}
            <div>
              桌号:  {{ table.tableNumber }}
            </div>
          </div>
          <div class="status">
            {{table.statuses[0].name}}
            <!--            {{table.statuses && table.statuses.length > 0? table.statuses[0].name : '' }}-->

          </div>
        </div>
      </div>

    </div>

    <!--    分页-->
    <el-pagination
      background
      layout="prev, pager, next,total"
      :current-page.sync="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      @prev-click="getPrePage"
      @next-click="getNextPage"
      @current-change="handleCurrentChange"
      :total="total"
      :hide-on-single-page="true">
    </el-pagination>



    <!--添加用户信息对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="customer">
        <el-form-item label="顾客姓名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="customer.name"></el-input>
        </el-form-item>
        <el-form-item label="顾客手机号" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="customer.phone"></el-input>
        </el-form-item>
        <el-form-item label="顾客邮箱号" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="customer.email"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer cf">
        <el-button type="primary" @click="saveDate">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import {listTable,likeTable} from '@/api/table/table'
  import {ScrollPane} from "@/layout/components/TagsView/ScrollPane";
  import {updateToTwo} from '@/api/table/table';
  import {getUId} from "@/api/project/cart";

  export default {
        name: "order",
    components: {ScrollPane},
    //输入框中添加实时搜索功能，当用户输入时自动触发查询
    watch: {
      'queryParams.location': function (newValue) {
        if (newValue) {
          this.handleQuery();
        }
      }
    },
    data() {
      return {
        tableId:'',
        dialogFormVisible:false,
        formLabelWidth: '120px',
        table: {
          statuses: []
        },
        open1: false,
        open2: false,
        open3: false,
        queryParams: {
          pageNum: 1,
          pageSize: 12,
          id: null,
          tableNumber: null,
          location: null,
          status: null,
          statuses:null
        },


        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        title: "",
        form: {
          id: "",
          tableNumber: "",
          location: "",
          statuses: ""
        },
        form2: {
          id: "",
          tableNumber: "",
          location: "",
          stausId: ""
        }, form3: {
          id: "",
        },
        listTable: [],
        //输入框规则
        form2Rules: {
          id: [
            {required: true, message: '请输入ID', trigger: 'blur'}
          ],
          stausId: [
            {required: true, message: '请输入状态', trigger: 'blur'},
            {validator: this.validateStatusId, trigger: 'blur'}
          ],
        },
        customer:{
          id:null,
          name:null,
          phone:null,
          email:null,
          createtime:null,
          storageMoney:null,
          points:null,
          vipId:null,
          orderId:null,
          orderListId:null,
        },
        res1:{}

      };
    },
    created() {
      this.getList();
    },
    methods: {
      //跳转按钮
      toCart(res) {
        this.tableId=res.id;
        this.res1=res;
        if (res.stausId===2){
          this.$router.push({
            path: '/diandan/diandan',
            query: {
              customer:this.customer,
              tableId: res.id,
              uid: res.uid,
            }
          })
        }else {
          this.dialogFormVisible=true;
        }
      },
      //分页状态
      handleCurrentChange(val) {
        console.log(val)
        this.queryParams.pageNum = val;
        this.getList();
      },
      getPrePage(val) {

        this.queryParams.pageNum=val;
        this.getList();
      },
      getNextPage(val) {

        this.queryParams.pageNum=val;
        this.getList();
      },

      // 取消按钮
      cancel() {
        this.open1 = false;
        this.open2 = false;
        this.open3 = false;
        this.reset();
      },
      reset() {
        this.form = {
          id: null,
          tableNumber: null,
          location: null,
          status: null,
        };
        this.resetForm("form");
      },
      //修改的状态规则
      validateStatusId(rule, value, callback) {

        if (value !== '1' && value !== '2'&&value !=='3') {
          callback(new Error('状态 ID 必须为 1 或 2 或 3'));
        } else {
          callback();
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        const location = this.queryParams.location;
        this.queryParams.location = location;
        likeTable(location).then(response => {
          console.log('搜索结果：', response);
          this.listTable = response.data;
        });
      },
      //查询所有
      getList() {
        // this.loading = true
        listTable(this.queryParams).then(response => {
          console.log(response.data)
          this.listTable = response.data.list;
          this.total=response.data.total
          this.loading = false;
        });
      },
      // /获取uid
      getUid(){
        getUId(this.queryParams).then(response=>{
          console.log(response)
          this.uid=response.data;
        })
      },
      //输入用户名
      saveDate(){
        if (this.customer.name===null){
          this.$modal.msgError("请输入姓名")
        }else{
          const tableId = this.tableId;
          updateToTwo(tableId).then(response=>{
            if (response.code===200){
              this.getList();
              this.res1.stausId=2;
              this.toCart(this.res1);
            }
          })
        }
      },
    }

  }
</script>

<style scoped>
  #a1 span {
    font-size: 25px;
    line-height: 80px;
    padding-left: 25px;
    color: rgba(0, 0, 0, 0.1);
  }
  .dish-list ul, .selected-dishes ul {
    list-style-type: none;
    padding: 0;
  }
  .dish-list li, .selected-dishes li {
    cursor: pointer;
    padding: 8px;
    border: 1px solid #ccc;
    margin-bottom: 8px;
  }
  .dish-list li:hover, .selected-dishes li:hover {
    background-color: #f0f0f0;
  }

  .lou {
    margin: 10px;
    height: 100px;
    line-height: 35px;
    border-bottom: dashed 2px rgba(0, 0, 0, 0.2);
  }

  .lou > div {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 10px;
  }

  .status {
    font-size: 30px;
    color: rgba(0, 0, 0, 0.3);
    line-height: 50px;
  }

  .tableList {

    border: 1px solid #ccb1ea;

  }
  /*状态颜色*/
  .stu2{
    background-color: skyblue;
  }
  .stu3{
    background-color: greenyellow;
  }
  .stu1{
    background-color:rgba(0,0,0,0.1);
  }

  /*.div2 {*/

  /*  font-size: 13px;*/
  /*  color: #00afff;*/
  /*}*/

  span {
    padding: 0 20px;
  }

  .heard {
    color: #00afff;
    padding: 20px 20px;
  }



</style>

